<template>
  <rx-dialog @handOk="handOk" :oktext="$ti18('rxForm.closeBtn','关闭')" :showcancel="false">
    <rx-layout>
      <div slot="center">
          <a-tabs default-active-key="1"  >
              <a-tab-pane key="1" :tab="i18n('form.information','基础信息')">
                  <a-form :form="form">
                      <a-form-item style="display:none">
                          <a-input v-decorator="['id']"/>
                      </a-form-item>
                      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.appId','应用ID')">
                          {{mdl.id}}
                      </a-form-item>
                      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.name','名称')">
                          {{mdl.name}}
                      </a-form-item>
                      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.secret','密钥')">
                          {{mdl.secret}}
                      </a-form-item>
                      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.isLog','记录日志')">
                          {{mdl.isLog=='true'?i18n('form.yes','是'):i18n('form.no','否')}}
                      </a-form-item>
                  </a-form>
              </a-tab-pane>
              <a-tab-pane key="2" :tab="i18n('form.authorizeApi','授权接口')" force-render>
                <div class="appGrantTableList">
                  <div v-for="(obj,index) in sysAuthsServices" :key="index">
                    <div class="appGrantTableListHead">
                      <span>{{obj.key}}</span><span>{{i18n('form.processApi','流程相关外部API')}}</span>
                    </div>
                    <ul class="appGrantTable">
                      <li v-for="(auth,index) in obj.child">
                        <span class="appGrantTableHead" :class="{'color_798fff':(auth.method=='POST'),'color_83cd6c':(auth.method=='GET'),'color_ffbb3f':(auth.method=='PUT'),'color_ff6d6d':(auth.method=='DELETE')}">{{auth.method}}</span>
                        <span>{{auth.apiName || auth.url}}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </a-tab-pane>
          </a-tabs>

      </div>
    </rx-layout>
  </rx-dialog>
</template>
<script>
  import SysAuthManagerApi from "@/api/system/core/sysAuthManager";
  import {BaseForm, RxDialog, Util,RxLayout} from "@lowcode/jpaas-common-lib";
  import SysAppAuthApi from "@/api/system/core/sysAppAuth";

  export default {
    name: 'SysAuthManagerGet',
    mixins: [BaseForm],
    components: {
      RxDialog,
      RxLayout
    },
    data () {
          return {
              sysAuths:[],
              sysAuthsServices:[],
              id: null
          }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"SysAuthManager",key);
      },
      get(id) {
        return SysAuthManagerApi.get(id);
      },
      handOk() {
        Util.closeWindow(this, "ok");
      },
      onload_(values){
            var self_=this;
          if (values && values.id) {
              self_.id = values.id;
              SysAppAuthApi.findListByAppId(values.id).then(res => {
                  if(res && res.length>0){
                      this.sysAuths=res;
                  }
              })
          }
      },
      reconsitution(){
         var obj = [];
         this.sysAuths.filter(res=>{
           if(!obj.includes(res.service)){
             obj.push(res.service)
           }
         })
        var _this = this;
        _this.sysAuthsServices=[]
         obj.filter(res=>{
          var child = _this.sysAuths.filter(obj=>{
            if(obj.service == res){
              return true;
            }else {
              return false;
            }
          })
          if(child.length!=0){
            _this.sysAuthsServices.push({
              key:res,
              child:child
            })
          }
        })
      }
    },
    watch:{
      sysAuths:{
        handler(o,_o){
          this.reconsitution();
        },
        deep:true
      }
    }
  }
</script>

<style scoped>
.appGrantTableList{
  border-radius: 5px;
  border: solid 1px #dadde0;
  margin: auto;
  width: 90%;
  margin-top: 12px;
}
.appGrantTableListHead{
  height: 30px;
  background-color: #f0f2f5;
  line-height: 30px;
  padding: 0px 10px;
  margin-bottom: 5px;
}
.appGrantTableListHead span:nth-child(1){
  color: #555555;
  font-weight: 700;
}
.appGrantTableListHead span:nth-child(2){
  color: #8a9199;
  margin-left: 11px;
}
.appGrantTable{
    margin-top: 12px;
}
.appGrantTable li{
    display: flex;
    padding:0px 9px;
    color: #555555;
    font-size: 12px;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
}
.appGrantTable li:hover{
    background-color: #e3ecff;
}
.appGrantTable li span:nth-child(2){
    flex: 1;
}
.appGrantTable li:hover span:nth-child(3){
    display: block;
}
.appGrantTable li span:nth-child(3){
    display: none;
}
.appGrantTableHead{
    border-radius: 3px;
    color: #ffffff;
    height: 20px;
    line-height: 20px;
    margin: 5px 6px 5px 0px;
    padding: 0px 6px;
}

.color_798fff{
    background-color: #798fff;
}
.color_83cd6c{
    background-color: #83cd6c;
}
.color_ffbb3f{
    background-color: #ffbb3f;
}
.color_ff6d6d{
    background-color: #ff6d6d;
}
</style>